<template>
	<view class="profile">
		<!-- <gyd-navbar back-color="#fff" :title="title" :isBack="false"></gyd-navbar> -->

		<nav-bg-cover :bottom="100">
			<view class="profile-statusbar">
				<view class="fixed-top">
					<view class="statusbar" :style="'height:' + statusbarHeight + 'px'"></view>
				</view>
				<view class="navbar" :style="'height:' + navbarHeight + 'px'"></view>
			</view>

			<view class="user-layer">
				<view class="user">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="info">
						<view class="name">
							{{userInfo.nickname}}
							<text v-if="userInfo.user_type_txt != ''">({{userInfo.user_type_txt}})</text>
						</view>
						<view class="phone">{{userInfo.mobile}}</view>
						<view class="cur-store" v-if="role == 1"
							@click="pageRoute('/merchantPages/store-manage/store-manage')">
							<view>当前门店:{{storeInfo?storeInfo.store_name:'-'}}</view>
							<view>切换<uni-icons type="right" size="18"></uni-icons></view>
						</view>
						<view class="cur-store" v-if="role == 5">
							<view>门店:{{storeInfo?storeInfo.store_name:'-'}}</view>
						</view>
					</view>
				</view>

				<!-- 水站商家 -->
				<view class="main-grid" v-if="storeInfo && storeInfo.user_type == 2">
					<u-grid class="grid-list" :border="false" :col="3">
						<u-grid-item class="grid-item" v-for="(item, index) in statisticalData" :key="index"
							@click="pageRoute(item.url)">
							<view class="label">
								<text class="name">{{ item.name }}</text>
								<u-icon name="arrow-right" size="15"></u-icon>
							</view>
							<view class="value">
								<text class="num">{{ item.value }}</text>
								<text class="unit">{{ item.unit }}</text>
							</view>
							<text class="desc">{{ item.desc }}</text>
						</u-grid-item>
					</u-grid>
				</view>

				<!-- 联盟商家 -->
				<view class="main-grid" v-if="storeInfo && storeInfo.user_type == 1">
				</view>
			</view>
		</nav-bg-cover>

		<view class="content">
			<view class="tools-card">
				<view class="title">常用功能</view>
				<gyd-func-menu :menu_type="2" :col="4"></gyd-func-menu>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<gyd-tabbar :current="4"></gyd-tabbar>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
		onMounted,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '我的',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		statisticalData: {},
		userInfo: false,
	});

	const statusbarHeight = ref(0);
	const navbarHeight = ref(0);
	const role = ref(cache.get('role', false));
	const storeInfo = ref(cache.get('selStore'));

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	// 组件实例挂载到DOM后执行
	onMounted(() => {
		// 在这里执行其他需要在组件挂载后运行的代码
		// #ifdef APP
		statusbarHeight.value = plus.navigator.getStatusbarHeight();
		console.log('APP状态栏1', statusbarHeight.value)
		// #endif
		// #ifdef MP
		statusbarHeight.value = getStatusBarHeight();
		console.log('小程序状态栏1', statusbarHeight.value)
		// #endif
		navbarHeight.value = statusbarHeight.value + uni.upx2px(88);
		console.log('状态栏2', navbarHeight.value)
	});

	function getStatusBarHeight() {
		let statusBarHeight = 0;
		uni.getSystemInfo({
			success: function(info) {
				statusBarHeight = info.statusBarHeight;
			}
		});
		return statusBarHeight;
	}

	const initData = () => {
		if (util.getToken()) {
			util.refreshUserInfo();
			state.userInfo = util.getUserInfo();
			console.log(state.userInfo);
		} else {
			util.toLogin();
		}

		state.statisticalData = [{
			name: '门店收益',
			value: '200.00',
			unit: '元',
			desc: '完成收益',
			url: '/merchantPages/profit/profit',
		}, {
			name: '门店订单',
			value: '24',
			unit: '单',
			desc: '订单量',
			url: '/merchantPages/order-statistic/order-statistic',
		}, {
			name: '门店客户',
			value: '2',
			unit: '个',
			desc: '当前门店客户',
			url: '/merchantPages/customer-manage/customer-manage',
		}, {
			name: '我的积分',
			value: '70.00',
			unit: '',
			desc: '累计积分',
			url: '/agentPages/integral-records/integral-records',
		}, {
			name: '结算明细',
			value: '1.91',
			unit: '元',
			desc: '累计结算金额',
			url: '/merchantPages/calculate-records/calculate-records',
		}];
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		statisticalData,
		userInfo,
	} = toRefs(state);
</script>

<style lang="scss">
	.profile {
		.user-layer {
			padding: 0 $m24;

			.user {
				@include f-between($align: center);
				padding: $m24 0;

				.avatar {
					width: 130rpx;
					height: 130rpx;
					background-color: #F7F7FB;
					border: 2rpx solid $white-color;
					border-radius: $radius-circle;
				}

				.info {
					flex: 1;
					margin-left: $m24;

					.name {
						color: $main-color;
						font-weight: bold;
						font-size: $font-36;
					}

					.phone {
						font-size: $font-24;
						color: $tips-color;
					}

					.desc {
						margin-top: $m8;
						color: $main-color;
					}

					.cur-store {
						display: flex;
						justify-content: space-between;

						view {
							color: $main-color;
						}
					}
				}
			}
		}

		.main-grid {
			padding: $m16 0;
			background-color: $white-color;
			border-radius: $radius-16;

			.grid-list {
				.grid-item {
					.label {
						@include f-center;
						color: $main-color;

						.name {
							@include f-center;

							&::before {
								@include f-center;
								width: 4rpx;
								height: $font-28;
								margin-right: $m8;
								content: '';
								background-color: $primary-color;
								border-radius: $radius-half;
							}
						}
					}

					.value {
						color: $main-color;
						font-weight: bold;

						.num {
							font-size: $font-30;
							color: $primary-color;
						}

						.unit {
							font-size: $font-24;
						}
					}

					.desc {
						font-size: $font-24;
						color: $tips-color;
					}
				}
			}
		}

		.content {
			position: relative;
			margin-top: -100rpx;
			padding: 0 $m24;

			.tools-card {
				margin: $m16 0;
				border-radius: $radius-16;
				background: #fff;

				.title {
					@include f-between($align: center);
					padding: $m24;
					font-size: $font-30;
					color: $main-color;
					font-weight: 500;
				}
			}
		}
	}
</style>